<template>
    <div class="content">
        <el-dialog :visible.sync="batchBind.dialogFormVisible"
        title="批量绑定" size="tiny" :before-close="handleClose">
            <el-tabs class="titleTap" @tab-click = "cleanData">
                <el-tab-pane label="IC卡">
                    <div v-loading = "upLoading">
                        <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="170px">
                            <!--<el-form-item label="选择学校" prop="schoolName">-->
                                <el-row :gutter="20" type="flex" justify="space-between">
                                    <el-col :span="20">
                                        <el-form-item label="选择学校：" prop="schoolName">
                                            <!--@getSchoolInfor="remoteMethod"-->
                                            <el-select v-model="ruleForm.schoolName" placeholder="请选择添加的学校" style="width:100%;" @change='schoolVerify'>
                                                <el-option v-for="item in schoolList" :key="item.pId" :label="item.sName" :value="item.pId">
                                                </el-option>
                                            </el-select>
                                            <!-- <school v-model="ruleForm.schoolName" style="width:100%" @change='schoolChange'></school> -->
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col align="center">
                                        <span class="downloadTip" @click="downloadModule(0)">请选择学校后下载批量绑卡模板</span>
                                    </el-col>
                                </el-row>
                            <!--</el-form-item>-->
                            <!--<el-form-item label="" prop="schoolName">
                            </el-form-item>    -->
                            <el-form-item label="选择导入的Excel文件：">
                            <el-row :gutter="20" type="flex" justify="space-between">
                                <el-col :span="20">

                                <span class="urlText" v-cloak>
                                    <el-row type="flex" class="row-bg" justify="space-between">
                                    <el-col :span="6">
                                        <el-button type="text" class="text">{{form.text}}</el-button>
                                    </el-col>
                                    <span>
                                        <el-button v-if="delStart" @click="delFileUrl" type="text">
                                        删除<i class="el-icon-close el-icon--right"></i>
                                        </el-button>
                                    </span>
                                    </el-row>
                                    <i v-if="expand" :style="`width:${progress}%`" class="expand"></i>
                                </span>
                                </el-col>
                                <span>
                                <template v-if="disabled">
                                    <file-upload ref="upload" @onSuccess="successFn" :isAuto="true" @getFileName="getFileName"  @onProgress="progressFn" :up-file-type="fileOptions.upFileType">
                                        <el-button  type="text" class="btn-success font-style-color" slot="trigger" size="small">选择文件</el-button>
                                    </file-upload>
                                </template>
                                <template v-else>
                                    <el-button type="text" class="btn-success font-style-color" @click="upTrigger"  size="small">选择文件</el-button>
                                </template>
                                </span>
                            </el-row>
                            </el-form-item>
                            <div v-if="percentage == 100">
                                <div v-if="delStart">
                                    <el-form-item label="校验结果：">
                                    <p>数据无误，可上传！</p>
                                    </el-form-item>
                                </div>
                            </div>
                            <div v-else>
                                <div v-if="delStart">
                                    <el-form-item label="校验结果：">
                                        <span class="title">数据校验中</span>
                                            <el-row :gutter="20">
                                            <el-col :span="20">
                                                <el-progress :percentage="percentage"></el-progress>
                                            </el-col>
                                            </el-row>
                                            <el-row :gutter="20">
                                            <el-col :span="20">
                                                <p>{{errorIng}}</p>
                                            </el-col>
                                            </el-row>
                                    </el-form-item>
                                </div>
                            </div>
                            <div v-if="upError">
                                <el-form-item label="错误信息：">
                                    <el-row :gutter="20">
                                    <el-col :span="20">
                                        <p>{{errorIng}}</p>
                                    </el-col>
                                    </el-row>
                                </el-form-item>
                            </div>
                            <!--<el-form-item >
                                    <el-row :gutter="20" type="flex" justify="space-between">
                                        <el-col :span="20">
                                                <span class="font-style-color" @click="downloadModule">
                                                    请先选择学校、年级、班级后下载班级专属批量绑卡模板
                                                </span>
                                        </el-col>
                                    </el-row>
                            </el-form-item>-->
                            <!--<el-row type="flex" class="row-bg" justify="center">
                                <el-col :span="4">
                                    <el-button @click="cancel('ruleForm')">关闭</el-button>
                                </el-col>
                                <el-col :span="4">
                                    <el-button type="primary" :disabled="percentage !== 100" :loading="loading" @click="btnUp('ruleForm')">上传</el-button>
                                </el-col>
                            </el-row>-->
                        </el-form>
                        <footer>
                            <el-button @click="cancel('ruleForm')">取消</el-button>
                            <el-button :disabled="percentage !== 100" :loading="loading" @click="add('ruleForm')" type="primary">确认</el-button>
                        </footer>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="ID卡">
                    <div v-loading = "upLoading">
                        <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="170px">
                            <!--<el-form-item label="选择学校" prop="schoolName">-->
                                <el-row :gutter="20" type="flex" justify="space-between">
                                    <el-col :span="20">
                                        <el-form-item label="选择学校：" prop="schoolName">
                                            <!--@getSchoolInfor="remoteMethod"-->
                                            <el-select v-model="ruleForm.schoolName" placeholder="请选择添加的学校" style="width:100%;" @change='schoolVerify'>
                                                <el-option v-for="item in schoolList" :key="item.pId" :label="item.sName" :value="item.pId">
                                                </el-option>
                                            </el-select>
                                            <!-- <school v-model="ruleForm.schoolName" style="width:100%" @change='schoolChange'></school> -->
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col align="center">
                                        <span class="downloadTip" @click="downloadModule(1)">请选择学校后下载批量绑卡模板</span>
                                    </el-col>
                                </el-row>
                            <!--</el-form-item>-->
                            <!--<el-form-item label="" prop="schoolName">
                            </el-form-item>    -->
                            <el-form-item label="选择导入的Excel文件：">
                            <el-row :gutter="20" type="flex" justify="space-between">
                                <el-col :span="20">
                                    <span class="urlText" v-cloak>
                                        <el-row type="flex" class="row-bg" justify="space-between">
                                            <el-col :span="6">
                                                <el-button type="text" class="text">{{form.text}}</el-button>
                                            </el-col>
                                            <span>
                                                <el-button v-if="delStart" @click="delFileUrl" type="text">
                                                删除<i class="el-icon-close el-icon--right"></i>
                                                </el-button>
                                            </span>
                                        </el-row>
                                        <i v-if="expand" :style="`width:${progress}%`" class="expand"></i>
                                    </span>
                                </el-col>
                                <span>
                                    <template v-if="disabled">
                                        <file-upload ref="upload" @onSuccess="successFn" :isAuto="true" @getFileName="getFileName"  @onProgress="progressFn" :up-file-type="fileOptions.upFileType">
                                            <el-button  type="text" class="btn-success font-style-color" slot="trigger" size="small">选择文件</el-button>
                                        </file-upload>
                                    </template>
                                    <template v-else>
                                        <el-button type="text" class="btn-success font-style-color" @click="upTrigger"  size="small">选择文件</el-button>
                                    </template>
                                </span>
                            </el-row>
                            </el-form-item>
                            <div v-if="percentage == 100">
                                <div v-if="delStart">
                                    <el-form-item label="校验结果：">
                                        <p>数据无误，可上传！</p>
                                    </el-form-item>
                                </div>
                            </div>
                            <div v-else>
                                <div v-if="delStart">
                                    <el-form-item label="校验结果：">
                                        <span class="title">数据校验中</span>
                                        <el-row :gutter="20">
                                            <el-col :span="20">
                                                <el-progress :percentage="percentage"></el-progress>
                                            </el-col>
                                        </el-row>
                                        <el-row :gutter="20">
                                            <el-col :span="20">
                                                <p>{{errorIng}}</p>
                                            </el-col>
                                        </el-row>
                                    </el-form-item>
                                </div>
                            </div>
                            <div v-if="upError">
                                <el-form-item label="错误信息：">
                                    <el-row :gutter="20">
                                    <el-col :span="20">
                                        <p>{{errorIng}}</p>
                                    </el-col>
                                    </el-row>
                                </el-form-item>
                            </div>
                            <!--<el-form-item >
                                    <el-row :gutter="20" type="flex" justify="space-between">
                                        <el-col :span="20">
                                                <span class="font-style-color" @click="downloadModule">
                                                    请先选择学校、年级、班级后下载班级专属批量绑卡模板
                                                </span>
                                        </el-col>
                                    </el-row>
                            </el-form-item>-->
                            <!--<el-row type="flex" class="row-bg" justify="center">
                                <el-col :span="4">
                                    <el-button @click="cancel('ruleForm')">关闭</el-button>
                                </el-col>
                                <el-col :span="4">
                                    <el-button type="primary" :disabled="percentage !== 100" :loading="loading" @click="btnUp('ruleForm')">上传</el-button>
                                </el-col>
                            </el-row>-->
                        </el-form>
                        <footer>
                            <el-button @click="cancel('ruleForm')">取消</el-button>
                            <el-button :disabled="percentage !== 100" :loading="loading" @click="add('ruleForm')" type="primary">确认</el-button>
                        </footer>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="双频卡">
                    <div v-loading = "upLoading">
                        <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="170px">
                            <!--<el-form-item label="选择学校" prop="schoolName">-->
                                <el-row :gutter="20" type="flex" justify="space-between">
                                    <el-col :span="20">
                                        <el-form-item label="选择学校：" prop="schoolName">
                                            <!--@getSchoolInfor="remoteMethod"-->
                                            <el-select v-model="ruleForm.schoolName" placeholder="请选择添加的学校" style="width:100%;" @change='schoolVerify'>
                                                <el-option v-for="item in schoolList" :key="item.pId" :label="item.sName" :value="item.pId">
                                                </el-option>
                                            </el-select>
                                            <!-- <school v-model="ruleForm.schoolName" style="width:100%" @change='schoolChange'></school> -->
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col align="center">
                                        <span class="downloadTip" @click="downloadModule(2)">请选择学校后下载批量绑卡模板</span>
                                    </el-col>
                                </el-row>
                            <!--</el-form-item>-->
                            <!--<el-form-item label="" prop="schoolName">
                            </el-form-item>    -->
                            <el-form-item label="选择导入的Excel文件：">
                            <el-row :gutter="20" type="flex" justify="space-between">
                                <el-col :span="20">

                                <span class="urlText" v-cloak>
                                    <el-row type="flex" class="row-bg" justify="space-between">
                                    <el-col :span="6">
                                        <el-button type="text" class="text">{{form.text}}</el-button>
                                    </el-col>
                                    <span>
                                        <el-button v-if="delStart" @click="delFileUrl" type="text">
                                        删除<i class="el-icon-close el-icon--right"></i>
                                        </el-button>
                                    </span>
                                    </el-row>
                                    <i v-if="expand" :style="`width:${progress}%`" class="expand"></i>
                                </span>
                                </el-col>
                                <span>
                                <template v-if="disabled">
                                    <file-upload ref="upload" @onSuccess="successFn" :isAuto="true" @getFileName="getFileName"  @onProgress="progressFn" :up-file-type="fileOptions.upFileType">
                                        <el-button  type="text" class="btn-success font-style-color" slot="trigger" size="small">选择文件</el-button>
                                    </file-upload>
                                </template>
                                <template v-else>
                                    <el-button type="text" class="btn-success font-style-color" @click="upTrigger"  size="small">选择文件</el-button>
                                </template>
                                </span>
                            </el-row>
                            </el-form-item>
                            <div v-if="percentage == 100">
                                <div v-if="delStart">
                                    <el-form-item label="校验结果：">
                                    <p>数据无误，可上传！</p>
                                    </el-form-item>
                                </div>
                            </div>
                            <div v-else>
                                <div v-if="delStart">
                                    <el-form-item label="校验结果：">
                                        <span class="title">数据校验中</span>
                                            <el-row :gutter="20">
                                            <el-col :span="20">
                                                <el-progress :percentage="percentage"></el-progress>
                                            </el-col>
                                            </el-row>
                                            <el-row :gutter="20">
                                            <el-col :span="20">
                                                <p>{{errorIng}}</p>
                                            </el-col>
                                            </el-row>
                                    </el-form-item>
                                </div>
                            </div>
                            <div v-if="upError">
                                <el-form-item label="错误信息：">
                                    <el-row :gutter="20">
                                    <el-col :span="20">
                                        <p>{{errorIng}}</p>
                                    </el-col>
                                    </el-row>
                                </el-form-item>
                            </div>
                            <!--<el-form-item >
                                    <el-row :gutter="20" type="flex" justify="space-between">
                                        <el-col :span="20">
                                                <span class="font-style-color" @click="downloadModule">
                                                    请先选择学校、年级、班级后下载班级专属批量绑卡模板
                                                </span>
                                        </el-col>
                                    </el-row>
                            </el-form-item>-->
                            <!--<el-row type="flex" class="row-bg" justify="center">
                                <el-col :span="4">
                                    <el-button @click="cancel('ruleForm')">关闭</el-button>
                                </el-col>
                                <el-col :span="4">
                                    <el-button type="primary" :disabled="percentage !== 100" :loading="loading" @click="btnUp('ruleForm')">上传</el-button>
                                </el-col>
                            </el-row>-->
                        </el-form>
                        <footer>
                            <el-button @click="cancel('ruleForm')">取消</el-button>
                            <el-button :disabled="percentage !== 100" :loading="loading" @click="add('ruleForm')" type="primary">确认</el-button>
                        </footer>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="虚拟卡">
                    <div v-loading = "upLoading">
                        <el-form ref="dataForm" :model="dataForm" :rules="rules" label-width="170px">
                                <el-row :gutter="20" type="flex" justify="space-between">
                                    <el-col :span="20">
                                        <el-form-item label="选择学校：" prop="schoolName">
                                            <!-- <school v-model="dataForm.schoolName" style="width:100%" @change='schoolChange2'></school> -->
                                            <el-select v-model="dataForm.schoolName" placeholder="请选择添加的学校" style="width:100%;" @change='verschoolVerify'>
                                                <el-option v-for="item in schoolList" :key="item.pId" :label="item.sName" :value="item.pId">
                                                </el-option>
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col align="center">
                                        <span class="vertivalTip" v-show="showVerTip">学校未添加人脸识别设备，请先添加设备~</span>
                                    </el-col>
                                </el-row>
                        </el-form>
                        <footer>
                            <el-button @click="cancel('dataForm')">取消</el-button>
                            <el-button :loading="loading2" @click="addvertivalCard('dataForm')" type="primary">绑定</el-button>
                        </footer>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </el-dialog>
    </div>
</template>
<script>
// import { getSchoolList, getGrade } from "api/classAll";
import { listSchoolByArea, getGrade, getClass, listSysDictByType, verifySchoolTeacher, verifyTeacherCardForImport, importTeacherCard, importTeacherVirtualCard } from 'api/cardManagement';
import school from 'components/SchoolClasss/school';
import fileUpload from 'components/Upload/fileUpload';
import { mapGetters } from 'vuex';
export default {
    name: 'addClassSchool',
    components: { school, fileUpload },
    props: {
        batchBind: {
            type: Object,
            required: true
        }
    },
    data() {
        return {

    // 设置上传类型
            fileOptions: {
                upFileType: 'excel'
            },

    // 初始加载进度
            progress: 0,

    // 展示上传文件名称
            form: {
                text: ''
            },

    // 判断是否选择文件
            delStart: false,

    // 是否进度条滚动
            expand: false,

    // 上传loading
            loading: false,
            loading2: false,
            disabled: false,
            percentage: 0,
            timout: null,
            errorIng: '',
            upError: false,

            showVerTip: false,
            upLoading: false,
            gradeList: [],
            classList: [],
            relationList: [],
            autoFill: false,
            ruleForm: {
                schoolName: '',
                schoolId: '',
                sGrade: '',
                sClass: '',
                studentName: '',
                cardNum: '',
                sCardType: '',
                sRelationType: '',
                sRelation: ''
            },
            dataForm: {
                schoolName: '',
                schoolId: ''
            },
            schoolList: [],
        // 是否培训和普通学校  1 0
            schoolType: '0',
        // rulesSelet: {
        //   validator: (rule, value, callback) => {
        //     if (!this.provinceId && !value) {
        //       callback(new Error("请选择"));
        //     } else {
        //       callback();
        //     }
        //   },
        //   trigger: "change"
        //   // required: true, message: "请选择", trigger: "change"
        // },
        // rulesSeletcity: {
        //   validator: (rule, value, callback) => {
        //     if (!this.ruleForm.cityId && !value) {
        //       callback(new Error("请选择"));
        //     } else {
        //       callback();
        //     }
        //   },
        //   trigger: "change"
        // },
            rulesSeletarea: {
                validator: (rule, value, callback) => {
                    if (!this.ruleForm.areaId && !value) {
                        callback(new Error('请选择'));
                    } else {
                        callback();
                    }
                },
                trigger: 'change'
            },
            rules: {
                schoolName: [
                { required: true, message: '请输入学校名称', trigger: 'blur' }
                ],
                sGrade: [
                { required: true, message: '请输入年级', trigger: 'blur' }
                ],
                sClass: [
                { required: true, message: '请输入班级', trigger: 'blur' }
                ],
                studentName: [
                { required: true, message: '请输入学生姓名', trigger: 'blur' }
                ],
                cardNum: [
                { required: true, message: '请输入卡号', trigger: 'blur' }
                ]
            
            }
        // name: { required: true, message: "请输入学校名称", trigger: "blur" },
        // cardNum: [
        //   { message: "请输入卡号", required: true },
        //   {
        //     message: "每次最多添加10个班",
        //     trigger: "blur",
        //     pattern: /^([1-9]|10)$/
        //   }
        // ]
        };
    },
    computed: {
        ...mapGetters(['token'])
    },
    created() {
        this.listSysDictByType();
        listSchoolByArea().then(res => {
            this.schoolList = res.data.content;
        });
    },
    watch: {
        'ruleForm.schoolId': {
            handler(val, oldVal) {
                console.log('val', val, 'oldVal', oldVal)
                if (val) {
                    this.disabled = true;
                }
            },
            deep: true
        }
    },
    methods: {

        progressFn(p) {
            this.progress = p.percent;
            this.expand = true;
        },

        progressIng(boolean) {
            if (boolean) {
                this.timout = setInterval(() => {
                    if (this.percentage <= (85 + Math.round(Math.random()*10))) {
                        this.percentage += Math.round(Math.random()*6)
                    } else {
                        clearInterval(this.timout);
                    }
                }, 500)
            } else {
                clearInterval(this.timout);
            }
        },

        upTrigger() {
            this.$refs.ruleForm.validateField('schoolName');
        },

        // 获取学校id
        schoolChange(val) {
            this.queryAllGrade(val);
            this.ruleForm.schoolId = val;
        },
        schoolChange2(val) {

            this.queryAllGrade(val);
            this.ruleForm.schoolId = val;
        },

        schoolVerify(val) {
            if (!val) {
                // 
            } else {
                this.ruleForm.schoolId = val;
            }
        },

        verschoolVerify(val) {
            if (!val) {
                // 
            } else {
                this.dataForm.schoolId = val;
            }
        },
        // 判断是否普通学校/培训学校
        judgmentSta(val) {
            this.schoolList.forEach(item => {
                if (val === item.pId) {
                    this.schoolType = item.sType;
                }
            });
        },

        // 年级列表
        queryAllGrade(val) {
            // 判断用户是否确认选择
            console.log('val', val);
            if (val) {
                this.judgmentSta(val);
            }

            this.autoFill = true;
            this.$nextTick(() => {
                this.autoFill = false;
            });
            this.getGradeName = '';
            this.newSchoolId = val;
            if (val) {
                getGrade(!val ? null : val).then(response => {
                    this.gradeList = response.data.content;
                });
            }
        },

        // 班级列表
        queryAllClass(gradeId) {
            this.classIdIn = gradeId;
            getClass(
                !this.newSchoolId ? null : this.newSchoolId,
                !gradeId ? null : gradeId
            ).then(response => {
                this.classList = response.data.content;
                console.log('this.classList', this.classList)
            });
        },

        successFn(obj) {
            // 判断是否拿到回调值
            this.upError = false;
            this.fileObj=obj;
            this.progressIng(true);

            // 触发上传事件
            if (!this.fileObj.fileName) {
                this.$message({
                    message: '请先上传文件',
                    type: 'warning'
                });
            } else {
                this.loading = true;
                let schoolId = this.ruleForm.schoolId;
                if (schoolId) {// 如果有该学校
                    verifyTeacherCardForImport(schoolId, this.fileObj.imgUrl, this.ruleForm.schoolName).then(response => {
                        this.loading = false;
                        this.percentage = 100;
                        this.progressIng(false);
                        this.$message({
                            message: '上传成功！',
                            type: 'success'
                        });
                    }).catch(Error => {
                        this.errorIng = Error;
                        this.progressIng(false)
                    });
                }
            }
            // else {
            //     this.loading = true;
            //     let schoolId = this.ruleForm.schoolId;
            //     if (schoolId) {// 如果有该学校
            //         verifyTeacherForImport(this.fileObj.imgUrl, this.fileObj.fileName, schoolId).then(res => {
            //             this.percentage = 100;
            //             this.progressIng(false);
            //             this.loading = false;
            //             // this.delUrl();// 还原数据
            //             // this.$emit('search-list');// 更新列表
            //             // this.$message({
            //             //     message: '恭喜你，上传成功！',
            //             //     type: 'success'
            //             // });
            //         }).catch(res => {
            //             this.errorIng = res;
            //             this.progressIng(false)
            //             this.loading = false;
            //         });
            //     } else {
            //         this.$refs.ruleForm.validateField('schoolName');
            //     }
            // }
        },
        getFileName(obj) {
            this.form.text = obj.name;
            this.delStart = true;
        },

        delFileUrl() {
            // this.ruleForm.schoolId = '';
            // this.ruleForm.schoolName = '';// 清空学校
            this.form.text = '';
            this.delStart = false;
            this.expand = false;
            this.loading = false;
            // this.disabled = false;
            clearInterval(this.timout);
            this.percentage = 0;
            this.upError = false;
        },

        downloadModule(cardType) {
            let className = '';
            console.log('this.classList', className);
            this.classList.forEach(item => {
                console.log(this.ruleForm.sClass, item.className);
                if (this.ruleForm.sClass == item.classId) {
                    return className = item.className;
                }
            });

            let schoolName = '';
            this.schoolList.forEach(item => {
                if (this.ruleForm.schoolId == item.pId) {
                    schoolName = item.sName;
                }
            });

            console.log('12', this.token, this.ruleForm.schoolId, schoolName)
            if (!this.token || schoolName === '' || this.ruleForm.schoolId === '') {
                this.$refs.ruleForm.validateField('schoolName');
                return;
            } else {
                verifySchoolTeacher(this.token, this.ruleForm.schoolId).then(res => {
                    if (res.data.content > 0) {
                        window.location.href = `${LOCAL_API.fyq}/card/expotTeacherInfo?token=${this.token}&schoolId=${this.ruleForm.schoolId}&schoolName=${schoolName}&cardType=${cardType}`;
                    } else {
                        this.$message('您选择的学校没有教师');
                    }
                }).catch((res) => {
                    this.$message('error');
                });
            }
        },

        createStateFilter(query) {
            return state => {
                state.value = state.schoolName;
                return state.value.toLowerCase().includes(query.toLowerCase());
            };
        },

        // 关系列表
        listSysDictByType() {
            listSysDictByType().then((res) => {
                this.relationList = res.data.content;
                console.log('res', res);
            })
        },


        add(ruleForm) {
            this.$refs[ruleForm].validate(valid => {
                if (!valid) {
                    return false;
                } else {
                    this.upLoading = true;
                // this.$message("已经添加成功，请稍等更新~");
                // this.loading = false;
                // this.batchBind.dialogFormVisible = false;
                // let schoolId = '';
                // this.schoolList.forEach(item =>{
                //     if(this.ruleForm.schoolName == item.value){
                //     return schoolId = item.schoolId;
                //     }
                // });              
                    let schoolId = this.ruleForm.schoolId;
                    if (schoolId) {// 如果有该学校               
                        importTeacherCard(this.ruleForm.schoolId).then(res => {
                            this.upLoading = false;
                            this.cancel();
                            this.delFileUrl();
                            /**
                             * edit by cuihd at 20180712
                             * 给父组件传值$emit
                             * 将获取的res复制到一个新的对象，其中包括轮询所需要的参数
                             */
                            if (res.data.content) {
                                let newObj = {};
                                for (let x in res.data.content) {
                                    newObj[x] = res.data.content[x];
                                }
                                newObj.isTrue = true; 
                                newObj.state = '1';
                                this.$emit('importCardState', newObj);
                            }                     
                        }).catch(Error => {
                            this.upLoading = false;
                        // this.$message(Error);
                        });
                    }              
                }
            });
        },

        addvertivalCard(dataForm) {
            this.$refs[dataForm].validate(valid => {
                if (!valid) {
                    return false;
                } else {
                    this.loading2 = true;
                    let schoolName = '';
                    this.schoolList.forEach(item => {
                        if (this.dataForm.schoolId == item.pId) {
                            schoolName = item.sName;
                        }
                    });
                    importTeacherVirtualCard(this.dataForm.schoolId, schoolName).then(res => {
                        this.loading2 = false;
                        this.handleClose();
                        this.$emit('update:visible', !this.visible);
                        /**
                         * edit by cuihd at 20180712
                         * 给父组件传值$emit
                         * 将获取的res复制到一个新的对象，其中包括轮询所需要的参数
                         */
                        if (res.data.content) {
                            let newObj = {};
                            for (let x in res.data.content) {
                                newObj[x] = res.data.content[x];
                            }
                            newObj.isTrue = true; 
                            newObj.state = '0';
                            this.$emit('importCardState', newObj);
                        }                      
                    }).catch(Error => {
                        this.loading2 = false;
                        // this.$message(Error);
                    });
                }
            });
        },

        handleClose() {
            this.$refs.ruleForm.resetFields();
            this.$refs.dataForm.resetFields();
            this.delFileUrl();
            this.ruleForm.schoolId = '';
            this.dataForm.schoolId = '';

            this.batchBind.dialogFormVisible = false;
        },

        cleanData() {
            this.$refs.ruleForm.resetFields();
            this.$refs.dataForm.resetFields();
            this.delFileUrl();
            this.ruleForm.schoolId = '';
            this.ruleForm.sGrade = '';
            this.ruleForm.sClass = '';
            this.dataForm.schoolId = '';
            this.dataForm.sGrade = '';
            this.dataForm.sClass = '';
        },
        
        cancel() {
            this.$refs.ruleForm.resetFields();
            this.$refs.dataForm.resetFields();
            this.delFileUrl();
            this.ruleForm.schoolId = '';
            this.dataForm.schoolId = '';

            this.batchBind.dialogFormVisible = false;
        }
    }
};
</script>
<style lang="scss" scoped>
.title {
  display: block;
  text-align: left;
  margin-left: 20px;
  font-size: 14px;
  margin-bottom: 18px;
  color: #333;
  position: relative;
  &::after {
    position: absolute;
    width: 4px;
    height: 14px;
    background: #ff5e2c;
    left: -15px;
    top: 10px;
    content: "";
  }
}
.tip{
  padding: 5px 0;
  color: #ccc;
  line-height: 18px;
}
.downloadTip{
    position: relative;
    top: -10px;
    left: 3px;
    color: #37a1fb;
    cursor: pointer;
}
.urlText {
  position: relative;
  height: 36px;
  width: 100%;
  display: block;
  border: 1px solid rgb(217, 200, 191);
  padding: 0 10px;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  .text {
    width: 155px;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .expand {
    position: absolute;
    width: 100%;
    height: 1px;
    margin: 2px 0;
    background: #37a1fb;
    bottom: -3px;
    left: 0;
    transition: all 5s;
  }
}
footer {
  text-align: center;
}
</style>
